<template>
  <div class="app-container">
    <el-row :gutter="15">
       <el-col :span="16">
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-card class="box-card" style="margin-bottom: 10px;">
        <div class="text item">
          <el-descriptions class="margin-top" title="表单信息" :column="3" border>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-office-building"></i>管理部门</template>
                {{form.deptName}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-location-outline"></i>沙滩</template>
                {{form.objName}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-tickets"></i>任务标题</template>
                {{form.title}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-user"></i>人员</template>
                <el-tag>{{form.nickName}}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-time"></i>任务时间</template>
                {{form.dotime}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-time"></i>事件情况</template>
               <dict-tag :options="dict.type.report_err" :value="form.err"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-location-outline"></i>上报位置</template>
                {{form.address}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-tickets"></i>备注</template>
                {{form.remark}}
              </el-descriptions-item>
            </el-descriptions>
            <el-tabs type="border-card" v-if="form.types && form.types.length != 0" style="margin-top: 10px;">
              <template v-for="(titem,tindex) in form.types" >
                <el-tab-pane :label="titem.name">
                  <el-row :gutter="5">
                    <template v-for="(item,index) in titem.items">
                    <el-col :span="8">
                    <el-form-item>
                      <span slot="label"><i class="el-icon-caret-right"></i>{{item.itemName}}:</span>
                      <el-tag>{{item.itemVal}}</el-tag>
                    </el-form-item>
                    </el-col>
                    </template>
                  </el-row>
                </el-tab-pane>
              </template>
              </el-tabs>
        </div>
        <el-card class="box-card" style="margin-top: 5px;" v-if="pics != null && pics.length > 0">
          <div slot="header" class="clearfix">
            <span>图片附件</span>
          </div>
          <div class="text item">
            <el-image v-for="(pic,pindex) in pics"
                  style="width: 100px; height: 100px;margin-right: 5px;"
                  :src="pic.url"
                  fit="scale-down"
                  :preview-src-list="srcList"></el-image>
          </div>
        </el-card>
      </el-card>
    </el-form>
    </el-col>
       <el-col :span="8">
          <div id="amap-container">
            <div class="amapClass" id="custom-amap" />
          </div>
       </el-col>
    </el-row>
    <el-form ref="evoForm" :model="evo" label-width="110px">
    <el-card class="box-card" v-if="evo != null && evo.evalid != ''" style="margin-top: 5px;margin-bottom: 5px;">
      <el-descriptions class="margin-top" title="评价信息" :column="3" border>
          <el-descriptions-item>
            <template slot="label"><i class="el-icon-user"></i>人员</template>
            {{evo.userName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"><i class="el-icon-office-building"></i>部门</template>
            {{evo.deptName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-star-on"></i>
              评分
            </template>
            <el-rate v-model="evo.allStr" show-text disabled text-color="#ff9900"></el-rate>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              评语
            </template>
            {{evo.remark}}
          </el-descriptions-item>
          <el-descriptions-item v-for="(tItem,tIndex) in evo.types">
            <template slot="label">
              <i class="el-icon-caret-right"></i>
              {{tItem.name}}
            </template>
            <template v-for="(iItem,iIndex) in tItem.items">
              <el-form-item>
                <span slot="label"><i class="el-icon-caret-right"></i>{{iItem.itemName}}:</span>
                <el-tag>{{iItem.itemVal}}</el-tag>
              </el-form-item>
            </template>
          </el-descriptions-item>
        </el-descriptions>
     </el-card>
     </el-form>
    <el-form ref="worklogform" :model="worklog" :rules="rules" label-width="110px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>审办信息</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">审核</el-button> -->
        </div>
        <div class="text item">
         <el-steps :active="active" align-center>
           <template v-for="(pitem,pindex) in process" >
            <el-step :title="pitem.name" :description="pitem.actime"></el-step>
           </template>
         </el-steps>
        </div>
        <el-tabs type="border-card" style="margin-top: 10px;">
          <el-tab-pane label="业务处理" v-if="deal">
            <el-row :gutter="5">
              <el-col :span="14">
                <el-form-item label="执行" prop="action">
                    <el-radio-group v-model="worklog.action" size="medium" @change="actionChange($event)" v-if="worklog.eflag == null || worklog.eflag != 'Y'">
                      <el-radio v-for="(item, index) in actionOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
                    </el-radio-group>
                    <el-radio-group v-model="worklog.action" size="medium" @change="actionChange($event)" v-if="worklog.eflag != null && worklog.eflag == 'Y'">
                      <el-radio v-for="(item, index) in actionOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  </el-col>
                  <el-col :span="10" v-if="turnShow">
                  <el-form-item label="转办" prop="tid">
                    <el-select v-model="worklog.tid" placeholder="请选择转办" clearable :style="{width: '100%'}">
                      <el-option v-for="(item, index) in tidOptions" :key="index" :label="item.name" :value="item.objid"
                        :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                  </el-col>
                  <el-col :span="24">
                  <el-form-item label="说明" prop="memo">
                    <el-input v-model="worklog.memo" type="textarea" placeholder="备注说明"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="24">
                <el-form-item label="图片">
                  <image-upload v-model="worklog.pic" ref="imageUpload" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="日志">
            <el-timeline>
              <template v-for="(litem,lindex) in logs">
                <el-timeline-item :timestamp="litem.createTime" placement="top">
                  <el-card>
                    <h4 v-if="litem.status == '0'">{{litem.oname}}-{{litem.title}}-{{litem.name}}</h4>
                    <h4 v-if="litem.status == '1'">{{litem.userName}}-{{litem.title}}-{{litem.name}}</h4>
                    <p v-if="litem.status == '0'">{{litem.content}}</p>
                    <p v-if="litem.memo != ''">{{litem.memo}}</p>
                    <p v-if="litem.pic && litem.pic != ''">
                    <el-image v-for="(pic,pindex) in litem.pic.split(',')"
                          style="width: 100px; height: 100px;margin-right: 5px;"
                          :src="pic"
                          fit="scale-down"
                          :preview-src-list="litem.pic.split(',')"></el-image>
                    </p>
                    <p v-if="worklog != null && worklog.logid == litem.logid && worklog.action=='0' && form.userId == worklog.operatorid">
                      <el-button type="danger" @click="toReSubmit" plain>重新提交</el-button>
                    </p>
                  </el-card>
                </el-timeline-item>
              </template>
              </el-timeline>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      </el-form>
    <div slot="footer" class="dialog-footer" style="margin-top: 10px;">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm" v-if="deal">确 定</el-button>
      <el-button @click="close()">返 回</el-button>
    </div>
  </div>
</template>

<script>
  import {
    listReport,
    getReport,
    delReport,
    addReport,
    updateReport,
    initBean
  } from "@/api/buss/report";
  import { startModelWorkflow,nodeDeal,process,need,worklog,processlog } from "@/api/system/sysModel";
  import { ossList } from "@/api/system/oss";

  const AMap = window.AMap;
  export default {
    name: "Report",
    dicts: ['glo_status','report_err'],
    data() {
      return {
        // 按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        active:0,
        // 地图对象
        map: null,
        // 地图标记
        marker: '',
        lon:'',
        lat:'',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          objid: undefined,
          type: '0',
          deptId: undefined,
          title: undefined,
          userId: undefined,
          dotime: undefined,
          status: undefined,
          checker: undefined,
          mid: undefined,
          cnode: undefined,
        },
        // 表单参数
        form: {},
        deptOptions: [],
        // 用户选项
        userOptions: [],
        tidOptions:[],
        objs: [],
        process: [],
        worklog:{},
        logs:[],
        url:'',
        pics:[],
        srcList:[],
        deal:false,
        logid:undefined,
        deptId:undefined,
        actionOptions: [
          {
            "label": "已处理",
            "value": 1
          }, {
            "label": "无需处理",
            "value": 2
          }, {
            "label": "退回",
            "value": 0
          }, {
            "label": "转办",
            "value": 3
          }],
          endactionOptions: [
          {
            "label": "已处理",
            "value": 1
          },{
            "label": "退回",
            "value": 0
          }],
          turnShow:false,
        // 表单校验
        rules: {},
        evo:{},
        logid:undefined
      };
    },
    created() {
      const id = this.$router.currentRoute.params.objId;
      const url = this.$route.query.url;
      this.logid = id;
      this.url = url;
      this.getInfo(id);
    },
    methods: {
      getInfo(id){
        this.loading = true;
        this.reset();
        processlog(id).then(response => {
          this.loading = false;
          //
          this.form = response.data.form;
          //
          this.pics = response.data.pics;
          if(this.pics != null && this.pics.length > 0){
            let srcList = [];
            this.pics.forEach(function(pic){
              srcList.push(pic.url);
            })
            this.srcList = srcList;
          }
          //
          this.process = response.data.result;
          this.active = response.data.seq;
          //
          if(response.data && response.data != null && response.data.need != null){
            this.worklog = response.data.need;
            if(this.worklog.status == '0' && this.worklog.action != '0'){
              this.deal = true;
              // this.worklog.action = '1';
            }else if(this.worklog.status == '0' && this.worklog.action == '0' && this.form.userId != this.worklog.operatorid){
              this.deal = true;
            }
            this.tidOptions = response.data.need.operators;
          }
          //
          this.logs = response.data.logs;
          //
          this.evo = response.data.evo;
        }).finally(() => {
          // 初始化地图页面
          this.initMap();
        });
      },
      close() {
        const obj = {
          path: this.url,
          query: { t: Date.now() },
        };
        this.$tab.closeOpenPage(obj);
      },
      actionChange(value){
        console.info(value);
        if(value == '3'){
          this.turnShow = true;
        }else{
          this.turnShow = false;
        }
      },
      // 表单重置
      reset() {
        this.form = {
          reportid: undefined,
          objid: undefined,
          type: '0',
          deptId: undefined,
          title: undefined,
          remark: undefined,
          userId: undefined,
          dotime: undefined,
          status: "0",
          checker: undefined,
          checkts: undefined,
          checkstatus: "0",
          checkmemo: undefined,
          delFlag: undefined,
          mid: undefined,
          cnode: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["worklogform"].validate(valid => {
          this.worklog.pics = this.$refs["imageUpload"].pics;
          if (valid) {
            this.buttonLoading = true;
            nodeDeal(this.worklog).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.close();
            }).finally(() => {
              this.buttonLoading = false;
            });

          }
        });
      },
      toReSubmit(){
        if(this.worklog.busstype == '0'){
          this.$router.push({path:'/buss/report/form0/' + this.worklog.objid,query:{url:"/system/sysModel/detailLog/"+this.logid,type:'0',logid:this.worklog.logid,t:new Date()}});
        }
        if(this.worklog.busstype == '1'){
          this.$router.push({path:'/buss/report/form1/' + this.worklog.objid,query:{url:"/system/sysModel/detailLog/"+this.logid,type:'1',logid:this.worklog.logid,t:new Date()}});
        }
      },
      //   初始化地图页面
      initMap() {
        this.map = new AMap.Map('custom-amap', {
          resizeEnable: true,
          zoom: 12,
          // mapStyle:"amap://styles/blue"
        });
        // 添加工具栏
        this.map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye','AMap.Geocoder'], () => {
          // 工具条
          const toolbar = new AMap.ToolBar();
          // 比例尺
          const scale = new AMap.Scale();
          // 显示鹰眼
          // const hawkEye = new AMap.HawkEye({isOpen:true});
          this.map.addControl(toolbar);
          this.map.addControl(scale);
          // this.map.addControl(hawkEye);
        });
        if(this.form != null
          && this.form.lng != null && this.form.lng != ''
          && this.form.lat != null && this.form.lat != ''
          ){
            this.addMaker(this.form.lat,this.form.lng,this.form.userName,this.form);
        }
        this.map.setFitView();
      },
      // 添加maker
      addMaker(lat,lon,name,item) {
        if(null != lat && undefined != lat && '' != lat && undefined != lon && null != lon && '' != lon){
          let marker = new AMap.Marker();
          // marker.setContent('<i class="el-icon-s-flag amap-obj-marker"></i>');
          // 添加maker
          const lnglat = [lon, lat];
          marker.setPosition(lnglat);
          marker.setExtData(item);
          this.map.add(marker);
          this.map.setCenter(lnglat);
          this.map.setZoom(12);
        }
      }
    }
  };
</script>
<style lang="scss">
  #amap-container {
    #custom-amap {
      height: 35vh;
      width: 100%;
      border: 1px solid #ccc;
    }
  }
  .amap-info-window{
      width: 120px;
      background: #fff;
      border-radius: 3px;
      padding: 3px 7px;
      box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
      position: relative;
  }
  .amap-obj-marker{
      position: absolute;
      top: -10px;
      // bottom: 0;
      left: -3px;
      // margin-left: -8px;
      color: #FFBA00;
  }
</style>
